<template>
	<view class="wall-list plr-16 mt-12">
		<view class=" ptb-12 plr-16 mb-4 bg-color-item br-16" v-for="item in list" :key="item.key" >
			<view class="flex flex-ai-center"  @click="$u.route('/pages/notice/wallDetails',{id:item.id})">
				<u-avatar size='32' :src="$ossUrl+item.avatar"></u-avatar>
				<view class="pl-8 flex flex-dir-col flex-js-sb">
					<text class="font-color-white font-size-14">{{item.nickname}}</text>
					<text class="font-size-8 font-color-minor">{{item.create_time}}</text>
				</view>
			</view>
			<view class="pt-12 font-size-14 font-color-999"  @click="$u.route('/pages/notice/wallDetails',{id:item.id})">
				{{item.content}}
			</view>
			<view class="flex mt-4" v-if="item.images">
				<template v-if='formatImageList(item).length==1'>
					<w-image v-for="(img,index) in formatImageList(item)" :key="index" :src='img' width="343"
						height="257" mode="top" @click.native='preview(img,formatImageList(item))'></w-image>
				</template>
				<template v-else-if="formatImageList(item).length==2">
					<w-image v-for="(img,index) in formatImageList(item)" :key="index" :src='img' width="171"
						height="171" mode="top" @click.native='preview(img,formatImageList(item))'></w-image>
				</template>
				<template v-else-if="formatImageList(item).length==3">
					<w-image v-for="(img,index) in formatImageList(item)" :key="index" :src='img' width="115"
						height="115" mode="top" @click.native='preview(img,formatImageList(item))'></w-image>
				</template>
			</view>
			<view class="comment-info font-size-12 mt-12 flex  flex-ai-center" v-if="item.comment.content"  @click="$u.route('/pages/notice/wallDetails',{id:item.id})">
				<view class="font-color-black" style="white-space:nowrap;">{{item.comment.username}}：</view>
				<text class="font-color-minor text-overflow flex-1">{{item.comment.content}}</text>
			</view>
			<view class="comment-inp mt-12">
				<u--input confirmType='send' @confirm='sendComment($event,item.commentForm,item)' fontSize='24rpx'
					customStyle='backgroundColor:#f7f7f7;padding:0 24rpx;' border='none' placeholder="评论"
					v-model="item.commentForm.content">
				</u--input>
			</view>
		</view>
		<w-loading emptyTop="150" :type="loading" emptyType="search"></w-loading>
		<w-icon class='send-btn' size='54' name="send" @click='$u.route(`/pages/notice/sendRumor`)'></w-icon>
	</view>
</template>

<script>
	import {
		getWallList,
		sendComment
	} from '@/api/notice/index.js'
	export default {
		data() {
			return {
				search: {
					page: 1,
					list_rows: 10
				},
				list: [],
				loading: 'none',
				sendLoading:false,
			}
		},
		methods: {
			init() {
				if (!this.list.length) {
					this.refresh();
				}
			},
			preview(img,list){
				let urls=list.map(v=>this.$ossUrl+v);
				uni.previewImage({
					urls,
					current:this.$ossUrl+img
				})
			},
			//获取图片数组
			formatImageList({
				images
			}) {
				if (!images) return []
				return images.split(',')
			},
			//发送评论
			sendComment(text,form,item){
				if(this.sendLoading) return;
				uni.showLoading({
					title:"发送中"
				})
				this.sendLoading=true;
				sendComment(form).then(res=>{
					uni.showToast({
						title:res.msg
					})
					item.comment={
						content:form.content,
						username:this.userInfo.nickname
					}
					item.commentForm={}
				})
			},
			//刷新
			refresh() {
				this.loading = 'none';
				this.search.page = 1
				this.getList(this.search);
			},
			//加载更多
			loadMore() {
				let search = this.$tools.copyObj(this.search);
				search.page++
				this.getList(search);
			},
			//获取辟谣列表
			getList(search) {
				if (this.loading == 'loading') return;
				this.loading = 'loading';
				getWallList(search).then(res => {
					if (search.page == 1) {
						this.list = []
					}
					this.loading = 'none'
					uni.stopPullDownRefresh()
					if (res.data.data.length) {
						this.search = search;
						res.data.data.map(v => {
							v.commentForm = {
								content: '',
								rumor_id: v.id,
							}
							this.$set(this.list,this.list.length,v)
						})
					} else {
						if (search.page == 1) {
							this.loading = 'empty'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.wall-list {
		.send-btn {
			position: fixed;
			right: 32rpx;
			bottom: 200rpx;
			z-index: 2;
		}
	}
</style>
